<!--
 * @Description:
 * @Author: xuxu
 * @Date: 2021-06-24 17:19:57
 * @LastEditors: xuxu
 * @LastEditTime: 2021-06-30 20:43:35
-->
<template>
 <div>
   <div class="user-face">
      <div class="photo">
        <div class="box">
          <img :src="user.userFace" alt />
        </div>
      </div>
      <div style="padding-top:100px;text-align:center">
        <el-button size="small" type="text" @click="toPhoto">修改头像</el-button>
      </div>
    </div>
   <div class="info">
      <el-form label-width="100" size="small">
        <el-form-item label="登录用户">{{ user.username }}</el-form-item>
        <el-form-item label="用户姓名">{{ user.realname }}</el-form-item>
        <el-form-item label="用户手机">{{ user.telephone }}</el-form-item>
        <el-form-item label="用户性别">
          <div v-if="user.gender">
            <span v-if="user.gender==='male'" >男</span>
            <span v-else-if="user.gender==='female'" >女</span>
            <!-- <span v-if="user.gender==='male'" class="el-icon-male green_info">男</span>
            <span v-else-if="user.gender==='female'" class="el-icon-female red_info">女</span> -->
            <!-- <span v-else>--</span> -->
            <i v-if="user.gender==='male'" class="el-icon-male green_info" />
            <i v-else-if="user.gender==='female'" class="el-icon-female red_info" />
          </div>
          <div v-else>未填写</div>
        </el-form-item>
        <el-form-item label="用户角色">{{ user.role===0?'管理员':'普通用户' }}</el-form-item>
        <el-form-item label="用户生日">{{ user.birth?moment(user.birth).format("YYYY-MM-DD"):'未填写' }}</el-form-item>
        <el-form-item
          label="注册时间"
        >{{ user.registerTime?moment(user.registerTime).format("YYYY-MM-DD HH:mm:ss"): '未填写' }}</el-form-item>
        <el-form-item label="邮箱">{{ user.email || '未填写' }}</el-form-item>
        <el-form-item label="用户状态">
          <el-tag
            size="small"
            :type="user.status==='正常'?'success':'danger'"
          >{{ user.status }}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;padding-right:200px;border-top:1px solid #f4f4f4">
      <el-button size="small" type="text" @click="toChange">修改个人信息</el-button>
    </div>
    <!-- 头像模态框 -->
    <div>

    <el-dialog
      ref="icon_form"
      :rules="rulesIcon"
      title="更改头像"
      :visible.sync="visibleIcon"
      width="50%"
      class="customer_modal"
      @close="clearDate('icon_form')"
    >
      <div>
        <!-- {{formIcon}} -->
        <el-form
          ref="icon_form"
          size="small"
          :model="formIcon"
          :rules="rulesIcon"
          label-width="80px"
        >
              <!-- prop:="userFace" -->
          <el-form-item label="头像" label-width="100px" prop="userFace" >
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="upSuccess"
              :before-upload="beforeUp"

            >
             <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
              <!-- <img  :src="formIcon.userFace" class="avatar" /> -->
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visibleIcon = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSavephoto">确 定 修 改</el-button>
      </span>
    </el-dialog>
    </div>
    <!-- 个人信息模态框 -->
    <div>
    <el-dialog
      title="提示"
      :visible.sync="visible"
      width="50%"
      class="customer_modal"
      @close="clearDate('personal_form')"
    >
      <el-form ref="personal_form" size="small" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录用户" prop="username">
          <el-input disabled :placeholder="form.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="form.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
  <!-- <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="form.birth"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择出生日期"
          />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSaveinfo">确 定 修 改</el-button>
      </span>
    </el-dialog>
    </div>
 </div>
</template>

<script>

import { findUserDetailsById,saveOrUpdate ,alterUserface,getInfo} from "@/api/user";
import { uploadFileURL, showFileURL } from "@/utils/config";
import moment from "moment";
// import { mapGetters, mapActions, mapState } from "vuex";
import {getToken} from "@/utils/auth"



export default {
 data() {
 return {
      showFileURL,
      uploadFileURL,
      imageUrl: '',
      visible: false,
      visibleIcon: false,
      form: {},
      formIcon: {},
      id:undefined,
      user:[],
  //  id:"25",
  //  user:[],
   rulesIcon: {
        userFace: [
          {
            required: true,
            message: "请输入头像地址",
            trigger: "blur"
          },
        ],
      },
        rules: {
        realname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
            }
          ],
      },
    }
 },
 computed: {
  //  ...mapGetters(["user"]),
 },

 methods: {
    moment,

  //  ...mapActions("user", ["getInfo"]),
  //  moment,
   async queryUserDetails(){
      const res = await findUserDetailsById({id:this.$route.query.id})
      // console.log(id);

      console.log(res);
      this.user = res.data
      // console.log(res.data)
    },
  toPhoto(){
        this.formIcon = {
        id: this.user.id,
        userFace: this.user.userFace,
      };
      this.visibleIcon = true;
    },
    // 图片上传成功
    upSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // this.form.photo = showFileURL + res.data.id;
        this.formIcon.userFace = this.showFileURL + res.data.id;

      },
      // 图片上传之前
    beforeUp(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      toSavephoto(){
        let temp ={
          id:this.formIcon.id,
          userface:this.formIcon.userFace
        }
        console.log(temp)
        this.$refs.icon_form.validate(async(valid) => {
          if(valid){
            let res = await alterUserface(temp)
            this.$notify({
                 title: "成功",
                 message: res.message,
            });
            this.visibleIcon = false;
            this.queryUserDetails();
            // this.queryCustomeDetails()
          }else {
            return false;
          }
        });
      },
  toSaveinfo() {
        this.$refs.personal_form.validate(async(valid) => {
          if(valid){
            // this.form.birth = moment(this.form.birth).fromat
            let res = await saveOrUpdate(this.form)
            this.$notify({
                 title: "成功",
                 message: res.message,
            });
            this.visible = false;
            this.queryUserDetails();
          }else {
            return false;
          }
        });
      },
  toChange() {
    this.form = { ...this.user };
    this.visible = true;
    },
  clearDate(form) {
    // 接受路由携带的参数
      this.$refs[form].clearValidate();
    },
 },
 created(){
    // this.findUserDetailsById()
    this.queryUserDetails()

 },
 mounted() {}
};
</script>
<style lang="scss" scoped>
.user-face {
  display: flex;
  padding: 1em 200px;
  & > div {
    flex: 1;
  }
  .photo {
    .box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>